<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件处理总结</title>
<style type="text/css">
.red{color:#FF0000;}
.big{font-size:36px;
color:#6600FF;
font-weight:600;
}
</style>
</head>

<body>
<div align="center">
  <p class="big"><strong>JavaScript事件处理总结</strong></p>
  <table width="100%" height="336" border="1">
<caption>
      <strong>JavaScript事件处理总结      </strong>
</caption>
    <tr>
      <td width="206" height="55"><div align="center"><strong>分类</strong></div></td>
      <td width="430"><div align="center"><strong>通用</strong>（兼容IE和非IE）</div></td>
      <td width="23"><div align="center"><strong>IE</strong></div></td>
      <td width="349"><div align="center"><strong>非IE</strong></div></td>
    </tr>
    <tr>
      <td>undefined和null</td>
      <td colspan="3"><p>（1）粗略等于：null==undefined，返回<span class="red">true</span></p>
      <p>（2）精确等于：null===undefined，返回<span class="red">false</span></p></td>
    </tr>
    <tr>
      <td>HTML元素绑定JS事件</td>
      <td><p>基本事件模型（跨浏览器）：<br />
        （1）最常见方式：直接绑定事件处理函数到HTML元素中：<br />
  &lt;input type=&quot;button&quot; value=&quot;按钮&quot; <span class="red">onclick=&quot;fn();&quot;</span> /&gt;</p>
        <p>（2）JS绑定方式：在JavsScript脚本中绑定事件处理函数：<br />
        document.getElementById(&quot;btn&quot;).<span class="red">onclick=fn</span>;</p>
        <p>（3）IE事件模型和DOM事件模型：<br />
        if(document.attachEvent){//IE<br />
          <span class="red">domObject.attachEvent(&quot;eventName&quot;, Fn);</span><br />
        }else{//非IE<br />
            <span class="red">domObject.addEventListener(&quot;eventType&quot;, Fn, false);</span><br />
        }</p></td>
      <td nowrap="nowrap"><p>一、使用attachEvent方法绑定事件：<br />
        目前，IE和Opera支持此方式</p>
      <p><span class="red">domObject.attachEvent(&quot;eventName&quot;, Fn);</span></p>
      <p>注意：eventName通常为以on字符开头的事件名称</p>
      <p>优点：一个DOM对象可以同时绑定多个事件，例如：</p>
      <p>var test = function(){alert(&quot;test...&quot;);}<br />
      var haha = function(){alert(&quot;haha...&quot;);}</p>
      <p>document.getElementById(&quot;btn&quot;).attachEvent(&quot;onclick&quot;, test);<br />
      document.getElementById(&quot;btn&quot;).attachEvent(&quot;onclick&quot;, haha);</p>
      <p>注意：IE是先绑定的后触发，Opera是先绑定的先触发。</p>
      <p>二、使用detachEvent删除绑定事件：</p>
      <p><span class="red">domObject.detachEvent(&quot;eventName&quot;, Fn);</span></p></td>
      <td nowrap="nowrap"><p>一、使用addEventListener方法绑定事件：<br />
        目前，Firefox、Chrome和Opera支持此方式</p>
        <p class="red">domObject.addEventListener(&quot;eventType&quot;, Fn, false);</p>
        <p>注意：eventType通常为去除on字符之后的事件名称</p>
        <p>优点：一个DOM对象可以同时绑定多个事件，例如：</p>
        <p>var test = function(){alert(&quot;test...&quot;);}<br />
          var haha = function(){alert(&quot;haha...&quot;);}</p>
        <p>document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;, test, false);<br />
          document.getElementById(&quot;btn&quot;).addEventListener(&quot;click&quot;, haha, false);</p>
        <p>二、使用removeEventListener删除绑定事件：</p>
        <p><span class="red">domObject.removeEventListener(&quot;eventType&quot;, Fn, false);</span></p></td>
    </tr>
    <tr>
      <td>取消事件的默认行为</td>
      <td><p>使用事件的返回值为false，来取消事件的默认行为：</p>
      <p class="red">return false;</p></td>
      <td nowrap="nowrap"><p>将事件对象的returnValue属性设为false：</p>
      <p class="red">event.returnValue = false;</p></td>
      <td nowrap="nowrap"><p>执行事件对象的preventDefault()方法：</p>
      <p class="red">evt.preventDefault();</p></td>
    </tr>
    <tr>
      <td>获取事件对象和事件源</td>
      <td><p>var evtObj;//事件对象<br />
        var
        evtTarget;//事件源</p>
        <p>var handler = function(evt){<br />
        if(evt){//非IE<br />
        evtObj = evt;<br />
        evtTarger = evt.target;<br />
        }else{//IE<br />
        evtObj = window.event;<br />
        evtTarget = window.event.srcElement;<br />
        }<br />
      }</p>
      <p>document.getElementById(&quot;btn&quot;).onclick=handle;</p></td>
      <td nowrap="nowrap"><p>使用全局对象：event，即window.event对象。</p>
        <p>事件对象：<span class="red">event，或window.event</span></p>
      <p>事件源：<span class="red">event.srcElement，或event.srcElement</span></p></td>
      <td nowrap="nowrap"><p>在事件函数中使用事件自动创建的Event对象作为参数：</p>
      <p>事件对象：在事件函数中，使用形参（例如evt），则此参数evt就是事件对象</p>
      <p>事件源：事件对象的target属性，例如：evt.target</p>
      <p>注意：事件函数的事件对象参数名不要叫event</p></td>
    </tr>
    <tr>
      <td>阻止事件传播</td>
      <td><p>阻止事件传播，该函数可以跨浏览器：</p>
        <p>var stopProp = function(evt)<br />
          {<br />
          if(evt.stopProgagation){//非IE<br />
          evt.stopProgagation();<br />
          }else{//IE<br />
          window.event.cancelBubble = true;<br />
          }<br />
        }</p></td>
      <td nowrap="nowrap"><p>使用event对象的cancelBubble属性阻止事件冒泡：</p>
      <p><span class="red">event.cancelBubble = true;</span> //为true事件不冒泡</p></td>
      <td nowrap="nowrap"><p>使用事件对象的stopPropagation()方法，阻止事件传播：</p>
      <p class="red">evt.sropPropagation(); //事件停止传播</p>
      <p>由于DOM事件模型分两个阶段传播事件，即捕获阶段和冒泡阶段，<br />
        所以，如果在捕获阶段就停止事件传播，则不会进入冒泡阶段。</p>      </td>
    </tr>
    
  </table>
  <p align="left">&nbsp;</p>
</div>
</body>
</html>
